<template>
  <Wrap>
    <div class='p-left'>
      <DeptTree @node-click='nodeClick'/>
    </div>
    <div class='p-right'>
      <el-card class='box-card'>
        <template #header>
					<div class='zjustify'>
						<div>
							<el-input v-model='state.form.name' placeholder='输入名称回车查询' clearable class='list-search'
												@keyup.enter='listQuery(state)'/>
							<el-button type='primary' @click='listQuery(state)' :icon="Search" plain>查询</el-button>
							<el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams'/>
							<el-button type='warning' :icon="Operation" @click='changeIndex()' plain>切换维护方式</el-button>
						</div>
						<div>
<!--							<el-button type='success' :icon='Plus' @click='tabAdd(state.url,{pid:state.form.pid,pname:state.form.pname})' plain>新增[新页面]</el-button>-->
							<el-button type='success' :icon='Plus' @click='editRef.open({pid:state.form.pid,pname:state.form.pname})' plain>新增 [抽屉]</el-button>
							<el-button type='success' :icon='Plus' @click='tabAdd(state.url,{pid:state.form.pid,pname:state.form.pname},{flush})' plain>
								新增 [页签]
							</el-button>
							<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
						</div>
					</div>
          <div v-show='state.moreParams' class='more-params'>
            <el-form :inline='true' label-width='100px'>
              <el-form-item label='更多参数1'>
                <el-input v-model='state.form.notes'  placeholder='更多参数1'/>
              </el-form-item>
              <el-form-item label='更多参数2'>
                <el-input v-model='state.form.xx'  placeholder='更多参数2'/>
              </el-form-item>
              <el-form-item/>
            </el-form>
          </div>
        </template>

        <el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}" v-loading='state.loading' :data='state.list'
                  border stripe @selection-change='listSelect($event,state)'>
          <el-table-column type='selection' width='55' align='center'/>
          <el-table-column label='序号' type='index' width='55' align='center'/>
          <el-table-column label='部门名称' width='250'>
            <template #default='scope'>
<!--              <span style='cursor:pointer;color: #3e9ece' @click='tabEdit(state.url,scope.row.id)'>{{ scope.row.name }}</span>-->
              <span style='cursor:pointer;color: #3e9ece' @click='editRef.open({id:scope.row.id})'>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label='备注' prop='notes'/>
          <el-table-column label='创建时间' prop='crtim' width='160'/>
          <el-table-column label='更新时间' prop='uptim' width='160'/>
					<el-table-column label='操作' width='76' header-align='center' align="center">
						<template #default="scope">
							<el-icon @click='tabEdit(state.url,scope.row.id)' style="cursor: pointer;font-size: 18px;top:2px;margin-left: 11px;color: #2874C5">
								<Edit/>
							</el-icon>
							<el-icon @click='listItemDelete(state,scope.row.id)' style="cursor: pointer;font-size: 18px;top:2px;margin-left: 10px;color: #ED6F6F">
								<Delete/>
							</el-icon>
						</template>
					</el-table-column>
        </el-table>

        <el-pagination
            @size-change='listQuery(state)' @current-change='listQuery(state)'
            class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
            :total='state.total' v-model:current-page='state.form.page' v-model:page-size='state.form.pageSize'
            layout='total, sizes, prev, pager, next, jumper'
        />
      </el-card>
			<Dedit ref='editRef' @listQuery='listQuery(state)'/>
    </div>
  </Wrap>
</template>
<script lang='ts'>
export default {name: 'SysOrgDept'};
</script>
<script lang='ts' setup>
import {Search,Plus, Delete, ArrowDown, ArrowUp,Operation,Edit} from '@element-plus/icons-vue';
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import {listQuery, listDelete, listSelect,tabAdd, tabEdit,listItemDelete} from '/@/comps/page/index';
import Wrap from '/@/comps/page/Wrap.vue';
// import DeptTree from '/@/comps/sys/DeptTree.vue';
import DeptTree from './tree.vue';
import router from '/@/router';
import { useRoute } from 'vue-router';
import Dedit from './dedit.vue';


const state = reactive({
  url: '/sys/org/dept', loading: true, ids: [], moreParams: false,
  form: {} as any, single: true, multiple: true, list: [], total: 0,
});

const editRef = ref() as any;

onMounted(() => {
  listQuery(state);
});

const flush = async () => {
	await listQuery(state);
};

//region a 左侧部门树点击
const nodeClick = async (node: any) => {
  state.form.pid = node.id;
  state.form.pname = node.name;
  await listQuery(state);
};
//endregion

const { proxy } = getCurrentInstance() as any;
const route = useRoute();
const changeIndex=async ()=>{
	proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, {contextMenuClickId: 1, ...route}));
	await router.push({
		path: state.url+ '/tindex',
	});
}

</script>

<style scoped>

</style>
